<template>
  <view class=" flex cu-bg" style="height: 208rpx;" :class="[item.status == 3 || item.status == 4 || item.status == 0 ? 'disabled' : '']">
    <view class="left width-200 text-white solid-right text-center flex align-center justify-center flex-direction "
      style="line-height: .9;" :class="[item.status == 3 || item.status == 4 || item.status == 0 ? 'disabled' : '']">
      <view class="" >
        <text class="text-price fu-fs40 text-white"></text>
        <text class="fu-fs56 text-white" style="font-size: 80rpx;">{{ discountPrice | filterPrice }}</text>
      </view>
      <view class="fu-fs24 margin-top-sm text-bold text-white">{{i18n['满']}}{{ limit | filterPrice }}可减</view>
    </view>
    <view class="right  flex-sub flex justify-between" style="min-width: 1px;">
      <view class="  flex flex-direction justify-around" style="min-width: 1px;padding: 24rpx 32rpx;">
        <view class="text-333 text-bold text-lg text-cut" :style="{color: item.status == 3 || item.status == 4 || item.status == 0 ? '#999' : '#333'}">{{ name }}</view>
        <view class="text-999 text-sm text-cut-2" v-if='item && item.content'>{{item.content}}</view>
        <view class="text-999 text-sm text-cut">有效期至: {{ time }}</view>
      </view>
    </view>
	<block v-if="item.status != 3">
		<view class="action text-white  fu-fs28 flex align-center justify-center" style="flex-shrink: 0;background-color: #FF5C5C;width: 52rpx;color: #fff;font-size: 24rpx;text-align: center;"
		  :class="[item.status == 3 || item.status == 4 || item.status == 0 ? 'disabled' : '']" @click.stop="handleClick" v-if="isMyCoupon">
		  {{ item.status == 1 ? '未使用' : item.status == 3 ? '已使用' : '已过期'}}</view>
		  <view class="action text-white  fu-fs28 flex align-center justify-center" style="flex-shrink: 0;background-color: #FF5C5C;width: 52rpx;color: #fff;font-size: 24rpx;text-align: center;"
		    :class="[isUse ? 'disabled' : '']" @click.stop="handleClick" v-else>{{ isUse ? i18n['已领取'] : '立即领取'}}
		  </view>
	</block>
  </view>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object
      },
      discountPrice: {
        type: [String, Number]
      },
      name: {
        type: String
      },
      time: {
        type: String
      },
      limit: {
        type: [String, Number]
      },
      isUse: {
        type: Boolean,
        default: false
      },
      isMyCoupon: {
        type: Boolean,
        default: false
      }
    },
    filters: {
      filterPrice(price) {
        return parseFloat(Number(price));
      }
    },
    methods: {
      handleClick() {
        this.$emit('click');
      }
    }
  };
</script>

<style lang="scss" scoped>
	.cu-bg{
		width: 100%;
		height: 188rpx;
		background-color: #fff;
		box-shadow: -2px 4px 6px 1px rgba(0,0,0,0.06);
		border-radius: 16rpx;
		overflow: hidden;
		 &.disabled{
			 background: url(https://localelife.chunchuangkeji.cn/h5img/images/coupon-bg.png);
			 background-size: 100% 100%;
			 background-repeat: no-repeat;
			
		 }
		 .left {
			 background: linear-gradient(315deg, #FE5C5C 0%, #FF6F26 100%);
			 color: #333;
			 font-size: 56rpx;
		 }
	}
  .right {
	  flex: 1;
    .action {
      border-top-right-radius: 16rpx;
      border-bottom-right-radius: 16rpx;
	  padding-right: 10rpx;
    }
    
  }
  .action.disabled {
    // background: #999999;
    color: #fff!important;
    background: linear-gradient(222deg, #C7C7C7 0%, #B1B1B1 100%) !important;
  }

  .left {
    border-top-left-radius: 16rpx;
    border-bottom-left-radius: 16rpx;
	flex-shrink: 0;

   &.disabled {
     color: #fff!important;
	 background: linear-gradient(222deg, #C7C7C7 0%, #B1B1B1 100%) !important;
   }
  }
</style>
